import Vue from "vue/dist/vue.esm.js";
import SideBar from "./components/SideBar"
import ElementUI from 'element-ui';

Vue.component('side-bar', SideBar);
Vue.use(ElementUI);

document.body.onload = function () {
    //加载设置
    window.chrome.storage.sync.get(null, data => {
        if (data && data.urlConfig && data.urlConfig.length > 0) {
            data.urlConfig.forEach(element => {
                if (window.location.host == element.host) {
                    //注入依赖的字体资源
                    insertViewIcons();
                    //注入组件
                    insertSideBar();
                }
            });
        }
    });

};

function insertSideBar() {
    let sideBar = document.createElement('div');
    sideBar.id = "toc-side-bar";
    sideBar.innerHTML = '<side-bar></side-bar>';
    document.body.appendChild(sideBar);
    new Vue({
        el: "#toc-side-bar"
    });
}

function insertViewIcons() {
    let ViewIcons = document.createElement('style');
    ViewIcons.type = 'text/css';
    ViewIcons.id = 'toc-font';
    ViewIcons.textContent = `
        @font-face {
            font-family: "element-icons";
            src: 
            url(${ window.chrome.extension.getURL("fonts/element-icons.ttf")}) format('truetype'),
            url(${ window.chrome.extension.getURL("fonts/element-icons.woff")}) format('woff');
        }
    `;
    document.head.appendChild(ViewIcons);
}
